<template>
  <div class="out-box">
    <div class="content-ab">
      <scrollHandle>
        <div class="img-list">
          <scrollHandle>
            <el-image class="imgstyle" :src="about1" fit="cover" />
          </scrollHandle>
          <scrollHandle>
            <el-image class="imgstyle" :src="about2" fit="cover" />
          </scrollHandle>
          <scrollHandle>
            <el-image class="imgstyle" :src="about3" fit="cover" />
          </scrollHandle>
          <scrollHandle>
            <el-image class="imgstyle" :src="about4" fit="cover" />
          </scrollHandle>
        </div>
      </scrollHandle>
      <scrollHandle>
        <div class="black-line">
          <div class="left-en">#CREATOR</div>
          <div class="right-ch">创始人团队</div>
        </div>
      </scrollHandle>

      <scrollHandle>
        <div class="porsen-content">
          <div class="porsen-img">
            <el-image  :src="about5" fit="cover" />
          </div>
          <div class="right-msg">
            <scrollHandle>
              <div>
                <div class="msg-name" style="margin-top: 8rem">赵磊</div>
                <div class="msg-mid" style="margin-top: 5rem">
                  Light-里特创意创始人兼设计总监<br />
                  山东工艺美院&济南大学客座教授<br />
                  曾任职4A公司-正邦，2009年至今，共主导与参与大中型企业项目660余个
                </div>
              </div>
            </scrollHandle>
            <scrollHandle>
              <div>
                <div class="lit-tit" style="margin-top: 5rem">
                  服务过的品牌：
                </div>
                <div class="base-cont" style="margin-top: 5rem">
                  【传媒行业】CCTV、中国移动、上海百事通、黑龙江卫视<br />
                  【集团政府】中粮集团、京沪高铁、用友集团、中国磷肥协会、山东高速<br />
                  【医疗行业】北京军区总医院、北京协和医院、齐鲁制药、鲁抗医药<br />
                  【汽车行业】红旗、北汽集团、长安福特、东风雪铁龙、五征汽车<br />
                  【能源建设】中海油、中国能建、中国电建、辽能集团<br />
                  【金融行业】浙江农信、北京金融街、宏信证券、齐鲁银行、铁岭银行<br />
                  【地产行业】链家地产、康桥地产、华纺地产、诺德物业、永泰地产、万象城<br />
                  【快消行业】上海百丽、东阿阿胶、得益乳业、中储粮、特步、橙子便利<br />
                  【互联网IT】赶集网、猎聘网、美团、浪潮<br />
                  【教育行业】欣加出国、大墨蒲公英、时悦少儿综合体、学宜佳
                </div>
              </div>
            </scrollHandle>
          </div>
        </div>
      </scrollHandle>
      <scrollHandle>
        <div class="porsen-content">
          <div class="porsen-img">
            <el-image :src="about6" fit="cover" />
          </div>
          <div class="right-msg">
            <scrollHandle>
              <div>
                <div class="msg-name" style="margin-top: 8rem">郭天鹏</div>
                <div class="msg-mid" style="margin-top: 5rem">
                  ight-里特创意创始人兼营销总监<br />
                  17年广告行业从业经验，曾先后任职于上海奥美、阳狮、WE等多家4A公司
                </div>
              </div>
            </scrollHandle>
            <scrollHandle>
              <div>
                <div class="lit-tit" style="margin-top: 5rem">
                  服务过的品牌：
                </div>
                <div class="base-cont" style="margin-top: 5rem">
                  【汽车行业】上海大众、上汽通用、广汽本田、吉利汽车<br />
                  【化妆品行业】高夫、六神、百雀羚、兰蔻、妮维雅、雅诗兰黛、倩碧、珈蓝<br />
                  【金融行业】招商银行、渣打银行、平安银行、交通银行<br />
                  【地产行业】仁恒地产、世茂集团、绿地集团<br />
                  【快消行业】轩尼诗、青岛啤酒、芝华士、可口可乐、三得利、星巴克、肯德基<br />
                  【家电行业】SONY、Bose、松下、老板电器、海尔<br />
                  【日用品行业】新秀丽、苏泊尔、WMF、好孩子
                </div>
              </div>
            </scrollHandle>
          </div>
        </div>
      </scrollHandle>
      <scrollHandle>
        <div class="bottom-img">
          <el-image :src="about7" fit="cover" />
        </div>
      </scrollHandle>
    </div>
  </div>
</template>

<script>
import about1 from "@/assets/imgs/about1.jpg";
import about2 from "@/assets/imgs/about2.jpg";
import about3 from "@/assets/imgs/about3.jpg";
import about4 from "@/assets/imgs/about4.jpg";
import about5 from "@/assets/imgs/about5.jpg";
import about6 from "@/assets/imgs/about6.jpg";
import about7 from "@/assets/imgs/about7.jpg";

import scrollHandle from "@/components/scrollHandle.vue";
export default {
  components: {
    scrollHandle,
  },
  data() {
    return {
      about1,
      about2,
      about3,
      about4,
      about5,
      about6,
      about7,
      screenWidth: window.innerWidth,
      bannerImgList: "",
      baseApi: process.env.VUE_APP_IMGADDRESS,
      brandData: "",
    };
  },
  mounted() {
    window.addEventListener("resize", this.getScreenSise);
  },
  methods: {
    getScreenSise() {
      this.screenWidth = window.innerWidth;
    },
  },
};
</script>

<style lang="scss" scoped>
.out-box {
  background-color: #fff;
  width: 100%;
}

.content-ab {
  width: 100%;
  margin: 0 auto;
}

.img-list {
  display: grid;
  grid-template-columns: 1fr;
  padding: 0 3.2rem;
  gap: 4rem;
}

.black-line {
  margin-top: 15rem;
  background: #000;
  width: 100%;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  color: #fff;
  align-items: flex-start;
  padding: 15rem 3.2rem;
}

.left-en {
  font-size: 9rem;
  font-family: "BebasFontEnB";
}

.right-ch {
  font-size: 10rem;
  font-family: "BebasFont";
}

.porsen-content {
  padding: 15rem 3.2rem 0;
  width: 100%;
  display: grid;
  grid-template-columns: 1fr;
}

.right-msg {
  width: 100%;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  // background: #000;
}

.msg-name {
  font-size: 8rem;
  font-family: "BebasFontB";
}

.msg-mid {
  font-size: 3.6rem;
  line-height: 5rem;
  font-family: "BebasFontB";
}

.lit-tit {
  font-size: 3rem;
}

.base-cont {
  color: #434343;
  font-size: 2.8rem;
  line-height: 4.1rem;
  text-align: justify;
}

.bottom-img {
  margin-top: 10rem;
  width: 100%;
  padding: 0 3.2rem;
}
.imgstyle {
  width: 100%;
  // height: 100%;
  // height: 45rem;
}
</style>